<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'	
import { ref } from 'vue';
import { getGradeListApi } from '../../api';
import NavBar from '../../components/navbar/index.vue'
interface Igrade {
	id: number,
	code: string,
	name: string,
	status: number
}
let course = null  
const list = ref<Igrade[]>([])
onLoad(async({data})=>{
	const temp = decodeURIComponent(data)
	course = JSON.parse(temp).course
	const { obj } = await getGradeListApi()
	list.value = obj
})
const nextPage = (name: string, code: string) =>{
	const data = { name, stage: code, course}
	uni.navigateTo({
		url:'/pages/grade-books/index?data=' + encodeURIComponent(JSON.stringify(data))
	})
}
</script>

<template>
	<NavBar
		title="选择年级册次"
		:underNavBar="false"
	/>
	<view 
		class="grad-container"
	>
		<view
			class="grad-item"
			v-for="(item, index) in list"
			:key="index"
			@click="nextPage(item.name, item.code)"
			hover-class="grad-item--on"
		>
		 {{item.name}}
		</view>
	</view>
</template>

<style lang="scss">
.grad-container{
  width: 732rpx;
  height: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 75rpx 9rpx 0 9rpx;
	.grad-item{
	  width: 200rpx;
	  height: 80rpx;
	  text-align: center;
	  line-height: 80rpx;
	  font-size: 30rpx;
	  font-weight: 400;
	  color: #323232;
	  background: #FFF7D6;
	  border-radius: 40rpx;
		margin: 0 22rpx 41rpx 22rpx;
	  font-family: Chill Round Gothic;
	}
	.grad-item--on{
	  background-color: #FEC100;
	}		
}


</style>